<template>
	<view>
		<u-subsection bgColor="#FFFFFF" :list="infoTypeList" :current="infoType" mode="button" @change="changeInfoType"
			class="top">
		</u-subsection>
		<view class="info_list" v-if="infoType == 0">
			<view class="info">
				<view class="info_title">
					1 认养鸽笼
				</view>
				<view class="info_content">
					鸽子通过认养鸽笼来认养，每个鸽笼包含两只种鸽。
					需要选择鸽笼的数量和认养时长来认养。
					<br>
					<text style="font-weight:bold;">认养时长：</text>
					从认养开始经过该时长的时间后认养结束。
					（不同的认养时长需要鸽子厂在饲料上花费更多，价格也会不一样）
				</view>
			</view>	
			<view class="info">
				<view class="info_title">
					2 认养收获
				</view>
				<view class="info_content">
					<text>①每个鸽笼的鸽子每过一段时间便会下蛋，每次会连续下两个蛋，当鸽子下蛋时，您将获得两颗鸽蛋</text>
					<br>
					<text>②当完成认养时，您将获得两只鸽子</text>
					<br>
					<text style="font-weight:bold">使用方式：</text>
					您可在商城使用这些鸽蛋和鸽子，您将以0元的价格购买鸽子和鸽蛋
					<br>
					<text style="font-weight:bold">明细：</text>
					您可在“我的”页面的“认养收获”中查看鸽子和鸽蛋的增加和减少
				</view>
			</view>
		</view>
		<view class="info_list" v-if="infoType == 1">
			<view class="info">
				<view class="info_title">
					1 商品购买流程
				</view>
				<view class="info_content">
					在商城购买商品后会生成订单，需要到“我的”查看发货订单并支付。
				</view>
			</view>
			<view class="info">
				<view class="info_title">
					2 商品优惠
				</view>
				<view class="info_content">
					通过认养获取的积分可以在商城使用，使用积分可以减低商品的价格(商品详情页面显示了积分的折扣价)。
				</view>
			</view>
			<view class="info">
				<view class="info_title">
					3 免费商品
				</view>
				<view class="info_content">
					通过认养获取的鸽子和鸽蛋可以在商城使用，通过商城购买的方式获取认养中得到的收获。
				</view>
			</view>
		</view>
		<view class="info_list" v-if="infoType == 2">
			<view class="info">
				<view class="info_title">
					1 积分规则
				</view>
				<view class="info_content">
					<view class="info_table">
						<view class="table_head">
							<view>活动</view>
							<view>积分</view>
						</view>
						<view class="table_datacell" v-for="rule in pointsRule" :key="rule.id">
							<view>{{rule.activity}}</view>
							<view>{{rule.type == 1 ? '+' : '-'}}{{rule.points}}</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<text style="font-weight: bold;">规则详情：</text>每天可以通过查看鸽笼信息来获取积分，认养越多的鸽笼将可以更快获取更多的积分
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoType: 0,
				infoTypeList: ['认养', '商城', '积分'],
				pointsRule: [],
				flag: false
			}
		},
		onLoad(option) {
			this.getPointsRule();
			if (option.data) {
				this.flag = true;
			}
		},
		onShow(){
			if(this.flag){
				this.infoType = 2
			}
		},
		methods: {
			changeInfoType(index) {
				this.infoType = index;
			},
			//获取积分规则信息
			async getPointsRule() {
				const res = await this.$myRequest({
					url: 'user/pointsActivities/list'
				})
				this.pointsRule = res.data;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFB300;
	}

	.info {
		margin: 30rpx 20rpx 0 20rpx;
		padding: 50rpx;
		width: 610rpx;
		border-radius: 20rpx;
		background-color: white;

		.info_title {
			color: #FFB300;
			font-size: 40rpx;
		}


		.info_content {
			margin-top: 50rpx;
			font-size: 35rpx;
		}

		.info_table {
			font-size: 38rpx;
			padding: 5rpx;
			background-color: #F6F6F6;
		}

		.table_head {
			display: flex;

			view {
				padding: 10rpx;
				width: 50%;
				text-align: center;
			}
		}

		.table_datacell {
			display: flex;

			view {
				background-color: white;
				margin: 1rpx;
				width: 50%;
				text-align: center;
			}
		}
	}
</style>
